<template>
  <div>
    <div v-if="_type == 'full'">
      <div class="other">
        <TablePart :table="rankList" height="2rem"></TablePart>
      </div>
    </div>
    <div v-else-if="_type == 'mini'">
      <div class="row" v-for="(item, index) in rankListMini" :key="index">
        <div>
          <img v-if="index==0" class="user-rank" src="../assets/rank1.png" alt="">
          <img v-else-if="index==1" class="user-rank" src="../assets/rank2.png" alt="">
          <img v-else-if="index==2" class="user-rank" src="../assets/rank3.png" alt="">
          <div v-else class="user-rank" style="background:#eee;" v-text="index+1"></div>
        </div>
        <div>
          <img class="user-head" src="../assets/via.png" alt="默认头像">
        </div>
        <div class="user-name">
          <div v-text="item.name"></div>
          <div class="name-sub">
            <span v-text="'内存: '+item.memory+'kB'"></span>&nbsp;
            <span v-text="'用时: '+item.time+'ms'"></span>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="_type == 'top3'">
      <div class="podium">
        <div class="podium-tow">
          <div class="podium-black" style="background:#A1B5C1">
            <br>
            <hr>
            <br>
            <h1 style="font-size:2rem">Ⅱ</h1>
            <br>
            <h2>张三</h2>
            <p>正确数:800</p>
            <p>正确率:88%</p>
            <br>
            <br>
            <br>
            <br>
            <div class="podium-circle"></div>
          </div>
        </div>
        <div class="podium-one">
          <div class="podium-black" style="background:#F7B81C">
            <br>
            <hr>
            <br>
            <h1 style="font-size:2rem">Ⅰ</h1>
            <br>
            <h2>李四</h2>
            <p>正确数:800</p>
            <p>正确率:88%</p>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="podium-circle"></div>
          </div>
        </div>
        <div class="podium-three">
          <div class="podium-black" style="background:#A97A6A">
            <br>
            <hr>
            <br>
            <h1 style="font-size:2rem">Ⅲ</h1>
            <br>
            <h2>王五</h2>
            <p>正确数:800</p>
            <p>正确率:88%</p>
            <br>
            <br>
            <div class="podium-circle"></div>
          </div>
        </div>
      </div>
    </div>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>
import TablePart from "./TablePart";
import { IViewTable } from "_i";
import { Get } from "../api";
let that = {};
export default {
  name: "RankPart",
  components: { TablePart },
  props: {
    type: {
      type: String,
      default: "mini"
    },
    filterAnd: {
      //过滤条件与
      type: Array,
      default: () => []
    },
    filterOr: {
      //过滤条件或
      type: Array,
      default: () => []
    },
    orderBy: {
      //排序规则
      type: Object,
      default: () => ({
        field: "poi",
        mode: "ASC"
      })
    },
    page: {
      type: Object,
      default: () => ({
        page_num: 1, //页码
        page_size: 10, //页的大小
        page_total: 10 //总页数
      })
    },
    funs: {
      type: Object
    }
  },
  computed: {
    _type() {
      return this.type;
    }
  },
  data() {
    return {
      rankListMini: [
        {
          name: "张三",
          memory: "100",
          time: 300
        },
        {
          name: "张三",
          memory: "100",
          time: 300
        },
        {
          name: "张三",
          memory: "100",
          time: 300
        },
        {
          name: "张三",
          memory: "100",
          time: 300
        },
        {
          name: "张三",
          memory: "100",
          time: 300
        }
      ],
      rankList: new IViewTable(
        [
          {
            title: "排名",
            key: 'index',
            width: 30
          },
          {
            type:"img",
            title: "头像",
            key: 'via'
          },
          {
            title: "账号",
            key: 'username'
          },
          {
            title: "昵称",
            key: 'nickname'
          },
          {
            title: "提交数",
            key: 'submit_count'
          },
          {
            title: "正确数",
            key: 'ac_count'
          },
          {
            title: "积分",
            key: 'poi'
          },
        ],
        []
      ),
      spinShow: false
    };
  },
  methods: {
    async update() {
      //更新函数
      this.spinShow = true;
      let { filterAnd, filterOr, orderBy, page } = this.$props;
      let res = await Get.getUserList({
        filterAnd,
        filterOr,
        orderBy,
        ...page
      });
      // console.log(res);
      this.page.page_total = res.page_total;
      this.rankList.data = res.data;
      this.spinShow = false;
    }
  },
  created() {
    that = this;

    this.funs.update = () => {
      this.update();
    };
  }
};
</script>

<style lang="less" scoped>
.podium {
  display: flex;
  justify-content: center;
  text-align: center;
  //   background: linear-gradient(rgb(255, 8, 0),#fff);
  &-one {
    height: 388px;
    width: 7rem;
  }
  &-tow {
    height: 353px;
    width: 7rem;
  }
  &-three {
    height: 318px;
    width: 7rem;
  }
  &-circle {
    height: 6rem;
    width: 6rem;
    margin: 10px auto;
    background: #fff;
    // border: 2px solid rgb(255, 216, 44);
    border-radius: 7rem;
  }
  &-black {
    height: 100%;
    width: 7rem;
    background: rgb(255, 69, 44);
    color: #fff;
    border-radius: 0 0 5rem 5rem;
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
  }
}

.other {
  &-item {
    border: 1px solid #ddd;
    height: 80px;
  }
}

.user {
  &-rank {
    width: 2rem;
    margin: 0 5px;
    text-align: center;
    border-radius: 300px;
  }

  &-head {
    border-radius: 2.3rem;
    width: 2.3rem;
    height: 2.3rem;
    margin: 0 10px;
  }

  &-name {
    width: 100%;
    white-space: nowrap;
    font-weight: bold;
    font-size: 1rem;
    margin-top: -3px;
    .name-sub {
      font-size: 0.7rem;
      margin-left: 1px;
      margin-top: -5px;
      color: rgb(92, 92, 92);
    }
  }

  &-weight {
    white-space: nowrap;
  }
}
.row {
  display: flex;
  align-items: center;
}
.outClass {
  background: red;
}
</style>